<template>
    <div>
        <div class="organInner">
            <p class="title">{{organ.title}}</p>
            <div class="map">
                <img src="@/assets/img/contact/map@2x.png" alt="map">
            </div>
            <div class="mainOrgan">
                <div class="item" v-for="item in organ.mainOrgan" :key="item.name">
                    <p>{{item.name}}</p>
                    <p>{{item.address}}</p>
                </div>
            </div>
            <div class="otherOrgan">
                <p class="title">{{organ.otherOrgan.title}}</p>
                <div class="list">
                    <div class="item" v-for="item in organ.otherOrgan.list" :key="item.name">
                        <p>{{item.name}}</p>
                        <p>{{item.address}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        computed:{
            organ(){
                return this.$t("contact.organ")
            }
        },
        mounted(){
            
        }
    }
</script>

<style lang="less" scoped>
.organInner {
    width: 1280px;
    .title {
        font-size:30px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:1;
        margin-bottom: 54px;
    }
    .map {
        margin-bottom: 100px;
        img {
            width: 641px;
            height: 531px;
        }
    }
    .mainOrgan {
        display: flex;
        border-bottom: 1px solid #DCDCDD;
        padding-bottom: 40px;
        margin-bottom: 60px;
    }
    .otherOrgan {
        .title {
            font-size:24px;
            font-weight:bold;
            color:rgba(207,18,28,1);
            line-height:30px;
            margin-bottom: 40px;
            text-align: left;
            position: relative;
            &::after {
                content:"";
                position: absolute;
                height: 2px;
                width:242px;
                background-color: #CF121C;
                left: 0;
                bottom:-10px;
            }
        }
        .list {
            display: flex;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
    }
    .item {
        flex: 0 0 33.333333%;
        text-align: left;
        margin-bottom: 60px;
        p {
            font-size:24px;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:1;
            &:last-child {
                margin-top: 20px;
                font-size:14px;
                font-weight:400;
                color:rgba(102,102,102,1);
                line-height:1;
            }
        }
    }
}
</style>